<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <title>用户列表</title>
  <link rel="stylesheet" th:href="@{/static/css/user.css}" type="text/css"></link>
</head>
<body>
  <div class="header">
    <h1>用户列表</h1>
  </div>
  <div class="add-button-wrapper">
    <a class="add-button" th:href="@{/add}">新增用户</a>
  </div>
  <table>
    <thead>
      <tr>
        <th>编号</th>
        <th>用户名</th>
        <th>电话</th>
        <th>操作</th>
      </tr>
    </thead>
	<tbody th:each="user :${userList}">
      <tr>
        <td th:text="${user.id}"></td>
        <td th:text="${user.name}"></td>
        <td th:text="${user.phone}"></td>
        <td>
          <a th:href="@{'/user/' + ${user.id} }">修改</a>
          <a th:href="@{'/user/' + ${user.id} }" onclick="del(event)">删除</a>
        </td>
      </tr>
    </tbody>
  </table>
<!--  隐藏组件-->
  <div style="display: none">
      <form id="deleteForm" method="post">
          <input type="hidden" name="_method" value="delete">
      </form>
  </div>

  <script>
    function del(event) {
      let deleteForm = document.getElementById("deleteForm");
      deleteForm.action = event.target.href;
      if(window.confirm("确定删除？")) {
        deleteForm.submit();
      }
      event.preventDefault();
    }
  </script>

</body>
</html>